<template>
	<view>
		<!-- 所属标签 -->
		<view class="tag-list row">
			<uni-tag text='11' class="tag-view" type="primary" size="small" :circle="true" :inverted="true"
			 v-for="(item, index) in detailsData.labelList" :key="index"
			 :text="item.name"
			 ></uni-tag>
		</view>
		
		<!-- 问题详情 -->
		<view class="content-main">
			<text class="title">{{ detailsData.title}}</text>
			<view class="info">
				<view class="author center">
					<image :src="detailsData.userImage || '/static/images/banner1.jpg'"></image>
						<text>{{detailsData.nickName}}</text>
					<text> {{$util.dateFormat(detailsData.createDate)}}</text>
				</view>
				<text>{{detailsData.viewCount}}阅读</text>
			</view>
			
			<!-- 文章内容 -->
			<!-- #ifdef MP -->
			<!-- nodes 是html代码字符串 -->
			<!-- <rich-text class="markdown-body" selectable="true" nodes="<h2 style='color:red'>文章内容</h2>"></rich-text> -->
			<rich-text class="markdown-body" selectable="true" :nodes="detailsData.htmlContent"></rich-text>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<!-- <text class="markdown-body" selectable="true" v-html="`<h2 style='color:red'>文章内容</h2>`"></text> -->
			<text class="markdown-body" selectable="true" v-html="detailsData.htmlContent"></text>
			<!-- #endif -->
		</view>
		
		
			<!-- 回答 -->
		<view class="footer">
			<view class="comment">
				<view class="footer-header">热门回答</view>
				<view class="comment-item row"
				v-for="(item, index) in commentList" :key="index"
				>
					<image :src="item.userImage ||'/static/images/banner1.jpg'"></image>
					<view class="comment-right">
						<view class="info space-between center">
							<text>{{item.nickName}}</text>
							<text> {{$util.dateFormat(item.createDate)}}</text>
						</view>
						<text class="content">{{item.content}}</text>
					</view>
				</view>
			</view>
		</view>
		
		
			<!-- 评论区 -->
				<view class="bottom center" @touchmove.stop.prevent="()=>{}">
					<textarea v-model="content" :disabled="disabled" :focus="focus" @click="clickComment" 
						class="textarea" placeholder="有何高见,展开讲讲……" />
					<button :disabled="disabled || !content.trim()"
						class="btn" size="mini"  @click="addComment">提交</button>
				</view>
				
				<!-- 分享 -->
				<!-- <mxg-share ref="share" ></mxg-share> -->
			</view>
</template>

<script>
	import api from '@/api/article.js'
	export default {
		data() {
			return {
					id: null, //文章id
					detailsData: {}, // 详情数据
					commentList: [], // 评论列表
					disabled: true, //默认禁用评论框
					focus: false, //默认不获取焦点
					content: '', // 评论内容
			}
		},
		onLoad(option) {
			this.id = option.id
			
			this.getDetails()
			this.loadCommentList()
				},
		// 微信小程序分享
			onShareAppMessage() {
				return {
					title: this.detailsData.title,
					path: this.$util.routePath()
				}
			},
		methods: {
			// 文章详情
			async getDetails() {
				const {data} = await api.getArticleById(this.id)
				uni.setNavigationBarColor({
					title:data.title
				})
				//处理图片，在h5和小程序太大了
				data.htmlContent = data.htmlContent
					.replace(/\<img/gi, '<img style="width:100%;height:auto"')
				console.log('// 文章详情',data)
				this.detailsData = data
			},
			//回答列表
			async loadCommentList() {
				const {data} = await api.getArticleCommentById(this.id)
				this.commentList = data
				console.log('回答',this.commentList)
			},
			// 点击评论框
			clickComment() {
				// 如果不禁用说明已经之前判断过已经登录了，不用再往下执行
				if(!this.disabled) return
				
				// 1.判断是否登录，
				const isLogin = this.$util.isLogin()
				console.log('isLogin',isLogin)
				if(isLogin) {
					// 已经登录，让评论可输入
					this.disabled = false
					this.$nextTick(() => { // 要使用箭头函数
						this.focus = true // 获取焦点
					})
				}
			},
			// 新增评论
			async addComment() {
				const content = this.content.trim()
				console.log('content', content)
				if(!content) return
				
				uni.showLoading({title: '提交中', mask: true })
				
				const data = {content, articleId: this.id}
				const res = await api.addArticleComment(data)
				uni.hideLoading()
				
				if(res.code === 20000) {
					// 重新查询评论列表
					this.loadCommentList()
					this.$util.msg('评论成功', {icon: 'success'})
					// 清除评论框内容
					this.content = ''
				}else {
					this.$util.msg('评论失败，请重试')
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url('@/common/css/github-markdown.css');
	@import url('@/common/css/github-min.css');
	
	.tag-list {
		// 一行排列不下，换行
		flex-wrap: wrap;
		padding: 10rpx 25rpx;
		font-size: 14px;
		background-color: #ffffff;
		.tag-view {
			margin-top: 15rpx;
			margin-right: 20rpx;
		}
	}
    
	.content-main {
		padding: 25rpx;
		.title {
			font-size: 45rpx;
			line-height: 55rpx;
			font-weight: bold;
		}
		.info {
			display: flex;
			align-items: center;
			margin: 30rpx 0;
			.author {
				font-size: 30rpx;
				color: #303133;
				image {
					width: 45rpx;
					height: 45rpx;
					border-radius: 100%;
					margin-right: 10rpx;
				}
			}
			&>text {
				margin-left: 10rpx;
				font-size: 25rpx;
				color: #999;
			}
		}
	}

	.footer {
		background-color: #F1F1F1;
		padding-top: 10rpx;
		/* 标题 */
		.footer-header{
			font-size: 30rpx;
			color: #303133;
			font-weight: bold;
			padding: 25rpx;
			&:before{
				content: '';
				width: 0;
				height: 40rpx;
				margin-right: 25rpx;
				border-left: 6rpx solid $mxg-color-primary;
			}
		}
	}
	
	/* 评论 */
	.comment {
		background-color: #FFFFFF;
		margin-top: 10rpx;
		// 最下方有评论按钮,
		padding-bottom: 120rpx;
		.comment-item {
			padding: 20rpx 25rpx;
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
				margin-right: 20rpx;
			}
			
			.comment-right{
				width: calc(100% - 80rpx);
				font-size: 25rpx;
				color: $mxg-text-color-grey;
				.content{
					font-size: 30rpx;
					color: $mxg-text-color-black;
					margin: 10rpx 0;
				}
			}
		}
	}
	
	/* 底部 */
	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		white-space: nowrap;// 不换行
		padding: 20rpx;
		background-color: #FFFFFF;
		border-top: $mxg-underline;
		.textarea {
			font-size: 30rpx;
			padding: 15rpx 20rpx;
			width: 100%;
			height: 70rpx;
			background-color: #F8F9FB;
			border-radius: 30rpx;
		}
		.btn {
			padding: 0 20rpx;
			margin-left: 15rpx;
		}
	}
</style>

